<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"  id="navBar" > </van-nav-bar> -->
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top"
                    :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
                    <!-- <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view> -->
                </view>
                <view class="main-container" ref="container">
                    <view class="sur_box_bg">
                        <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/homeAppliances_bg.png"
                            alt=""> -->
                        <view class="sur_box"></view>
                    </view>
                    <view class="card_bg">
                        <view class="pageTitle" @tap="showNodePopup">等待您的服务<img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/blackTriangleIcon.png" alt="" ></view>
                        <view class="card">
                            <view class="activityAddress">
                                <view class="itemLeft">
                                    <view class="activityDate"> {{reservationInfo.houseNumber}} </view>
                                    <view class="days">{{reservationInfo.addressDetail}}</view>
                                </view>
                                <view class="itemRight" @tap="toMap(0)">
                                    <view style="text-align: center; width: 100%;">
                                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/toMapIcon.png"
                                            alt="" style="width: 48rpx; height: 48rpx;">
                                    </view>
                                </view>
                            </view>
                            <!-- 地图 -->
                            <view class="map">
                                <map style="width: 100%; min-height: 464rpx;" id="myMap" scale="10" show-location="true"
                                    enable-3D="true" enable-scroll="true" enable-poi="true" :latitude="latitude"
                                    :longitude="longitude" :markers="allMarkers" @markertap="markertap"
                                    @callouttap="callouttap" @labeltap="labeltap" @tap="mapTap">
                                </map>
                            </view>
                            <view class="serviceProductInfo">
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serviceNameIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent">
                                        <view class="label">服务项目</view>
                                        <view class="text">{{reservationInfo.storeName}}{{reservationInfo.newName}}</view>
                                    </view>
                                </view>
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serviceTimeIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent">
                                        <view class="label">服务时间</view>
                                        <view class="text"><span>{{reservationInfo.reservationDate}} {{reservationInfo.reservationStartTime}}<span style="" v-if="reservationInfo.reservationStartTime && reservationInfo.reservationEndTime">~</span>{{reservationInfo.reservationEndTime}}</span></view>
                                    </view>
                                </view>
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/userNameIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent">
                                        <view class="label">联系人</view>
                                        <view class="text">{{reservationInfo.contactName}}</view>
                                    </view>
                                </view>
                                <view class="infoItem">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/userPhoneIcon.png"
                                        alt="" style="">
                                    <view class="infoItemContent phoneBox" >
                                        <view>
                                            <view class="label">联系电话</view>
                                            <view class="text">{{ reservationInfo.contactPhone }}</view>
                                        </view>
                                        <view class="phoneIcon">
                                            <van-icon name="phone" color="#FF6203" size="24" @click="makePhoneCall(reservationInfo.contactPhone)" />
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="bottom">
            <!-- <van-button type="primary" class="button" @click="toRegisterAct">核销码服务</van-button>
            <van-button type="default" class="checkBtn" @tap="toRegisterAct">扫码服务</van-button> -->
            <button plain type="default" class="button" @tap="showEnterCode">核销码服务</button>
            <button plain class="checkBtn"  @tap="toScanQRCode">扫码服务</button>
        </view>
        <!-- <view class="goodsAction">
            <van-goods-action id="goodact">
                <van-goods-action-button color="#FF6203" text="立即报名" type="warning" @click="toRegisterAct"  v-if="activityDetail.joinPeopleNum && activityDetail.joinPeopleNum< activityDetail.peopleNum"/>
                <van-goods-action-button color="#D4D4D4" text="报名已满" type="warning" @click="toRegisterAct"  v-if="activityDetail.joinPeopleNum===activityDetail.peopleNum"/>
            </van-goods-action>
        </view> -->
        <!-- 核销码服务 -->
       <enterVerificationCode :show="showCode" @closeEnterlPopup="closeEnterlPopup" @startService="startService" :popupParams="popupParams" :reservationId="reservationId"></enterVerificationCode>
       <scanQRCode :show="showInfo" @closeEnterlPopup="closeEnterlPopup" :popupParams="popupParams" @startService="startService"></scanQRCode>
       <serviceNode :show="showNode" @closeNodePopup="closeEnterlPopup" :reservationId="reservationId"></serviceNode>

    </view>
</template>

<script>

import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import {reservationInfoApi,queryServiceByCodeApi} from '@/api/staff'

import Toast from '@/wxcomponents/vant/toast/toast'
import enterVerificationCode from '@/mycomponents/serviceModule/enterVerificationCode.vue'
import scanQRCode from '@/mycomponents/serviceModule/scanQRCode.vue'
import serviceNode from '@/mycomponents/serviceModule/serviceNode.vue'

export default {
    components: { 
        enterVerificationCode,
        scanQRCode,
        serviceNode
    },
    data () {
        return {
            navBarTitle:'',
            menuButtonWidth:'',  //页面右侧按钮的宽度
            shareRight:'',  //图标右侧距离
            latitude: 35.088861, // 维度
            longitude: 111.03687, // 经度
            title: '待服务',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,

            reservationInfo:{
                id:1,
                storeName:'信合名都社区水岸华庭东郡亲子活动游戏活动',
                newName:'东郡·水岸华庭物业',
                startTime:'10月1日0:00',
                endTime:'11月30日23:55',
                term:'仅限东郡小区业主报名',
                nickname:'端木逢春',
                jobTitle:'东郡·水岸华庭物业',
                image:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png',
                introductionContent:"本次活动旨在为老人和孩子们提供一个欢乐的互动平台让大家在游戏中感受亲情的温暖，增强家庭凝聚力。活动将设置多个有趣的亲子游戏环节，让大家在游戏中体验亲子互动的乐趣，无需签到",
                warmReminder:'<p style="padding-bottom:10rpx;"> <a style="color:red;margin-right:5px;">1.</a>社群活动由发起人自行发起，蔚来仅提供活动展示空 间，请大家仔细甄别活动的真实性、有效性、安全性。所有运动、户外等具有相关风险的活动请确认购买保险；</p> <p style="padding-bottom:10rpx;"><a style="color:red;margin-right:5px;">2.</a>此活动报名后不可取消，报名积分不予退还；</p> <p><a style="color:red;width:20rpx;margin-right:5px;">3.</a>若活动发起人取消活动，系统将通知你活动取消并退还积分。</p>',
                joinPeopleNum:0,   //已参与人数
                peopleNum:100,  //可报名人数100人
                location:'东郡·水岸华庭小区西门小广场',
                serviceName:'亲子活动游戏',
                serviceTime:'10月1日0:00-11月30日23:55',
                serviceTerm:'仅限东郡小区业主报名',
                serviceType:'亲子活动',
                houseNumber:'黄金水岸3号楼1单元201',
                addressDetail:'运城市盐湖区河东东街5088号',
                servicePhone:'15600000000',
                contactName:'端木逢春',
                contactPhone:'15600000000',
                userAddress:'运城市盐湖区河东东街5088号',
                serviceContent:'本次活动旨在为老人和孩子们提供一个欢乐的互动平台让大家在游戏中感受亲情的温暖，增强家庭凝聚力。活动将设置多个有趣的亲子游戏环节，让大家在游戏中体验亲子互动的乐趣，无需签到',
                lat: "35.040398",
                lng: "110.976706"
            },

            params:{},
            activitiesId:undefined,  //活动ID
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            fromEarnPoints: false, // 从积分页面跳转过来
            showCode:false,  //核销码服务
            showInfo:false,//扫码服务
            showNode:false,//服务节点
            serviceStatus:'serving',  //服务状态  
            reservationId:undefined,  //预约ID
            popupParams:{
                reservationId:undefined,  //预约ID
                versionNo:undefined,  //版本号

            },  //弹窗参数
            allMarkers: [],
        }
    },

    computed: {

    },
    onLoad (data) {
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮宽度：', menuButtonInfo.width);
        console.log('胶囊按钮高度：', menuButtonInfo.height);
        this.menuButtonWidth = menuButtonInfo.width
        this.shareRight='padding-right:'+ ( this.menuButtonWidth + 5 ) +'px' + '!important'

        // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params) || '{}')
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)
            this.serviceStatus = this.params.serviceStatus
            this.fromEarnPoints = this.params.fromEarnPoints || false
            this.reservationId = this.params.reservationId || undefined
            this.popupParams.reservationId = this.params.reservationId 
        }
    },
    onReady () {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
    },
    onShow(){
        this.getReservationInfo()
    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {
        // 顶部导航栏返回
        onClickLeft () {
            uni.navigateBack({
                delta: 1
            })
        },
        handleScroll (e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
                // this.scrollMT = 'margin-top: 486px'
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 显示输入核销码的弹窗
        showEnterCode () {
            this.showCode = true
            console.log('核销码服务')
        },
        // 扫码核销结束后弹窗
        toScanQRCode () {
            this.showInfo = true
            console.log('核销码服务')
        },
        // 显示节点弹窗
        showNodePopup() {
            this.showNode = true
            console.log('服务节点')
        },
        // 关闭核销码弹窗
        closeEnterlPopup () {
            this.showCode = false
            this.showInfo = false
            this.showNode = false
            console.log('核销码服务')
        },
        // 开始服务
        startService () {
            this.showCode = false
            this.showInfo = false
            console.log('核销码服务')
            const params = {
                reservationId: this.reservationId,
                serviceStatus: 'serving'
            }
            uni.redirectTo({
                url: '/pages/serviceStaff/serving?params=' + encodeURIComponent(JSON.stringify(params))
            })
        },
        // 拨打电话
        makePhoneCall (phoneNumber) {
            wx.makePhoneCall({
                phoneNumber: phoneNumber
            });
        },
        // 跳转到地图
        toMap (type) {
            console.log('地图', this.latitude, this.longitude)
            // 添加类型检查
            if (typeof this.latitude !== 'number' || typeof this.longitude !== 'number') {
                Toast.fail('坐标参数异常')
                return
            }
            // 调用微信地图接口打开地图
            wx.openLocation({
                latitude: this.latitude,
                longitude: this.longitude,
                scale: 18
            });
        },
        mapTap(e){
            console.log('@@@ maptap',e)
        },
        toScanQRCode() {
            uni.scanCode({
                onlyFromCamera: true, // 只允许从相机扫码
                scanType: ['qrCode'], // 只识别二维码
                success: async (res) => {
                    console.log('扫码结果:', res);
                    if (res.result) {
                        // 调用核销接口
                        uni.showLoading({ title: '验证中...' });
                        // 这里替换为实际的核销API调用
                        try {
                            const apiRes = await queryServiceByCodeApi({ code: res.result });
                            // 成功响应后更新弹窗参数
                            this.popupParams = {
                                ...this.popupParams,
                                apiData: apiRes.data // 添加接口返回数据
                            };
                            uni.hideLoading();
                            uni.showToast({ title: '核销成功', icon: 'success' });
                            this.showInfo = true; // 打开弹窗（会自动传递更新后的popupParams）
                        } catch (err) {
                            uni.hideLoading();
                            uni.showToast({ title: '核销失败', icon: 'none' });
                        }
                    }
                },
                fail: (err) => {
                    console.error('扫码失败:', err);
                    uni.showToast({ 
                        title: err.errMsg || '扫码失败', 
                        icon: 'none' 
                    });
                }
            });
        },
        // 预约详情
        getReservationInfo () {
            reservationInfoApi({reservationId:this.reservationId}).then(res => {
                console.log('预约详情', res)
                if (res.code === 200) {
                    this.reservationInfo = res.data
                    this.latitude = Number(res.data.lat)
                    this.longitude = Number(res.data.lng)
                    console.log('this.latitude', this.latitude, this.longitude)
                    this.popupParams.versionNo = this.reservationInfo.versionNo
                } else {
                    Toast.fail(res.message)
                }
                this.allMarkers = [{
                    id: 0,
                    latitude:  this.latitude,
                    longitude:  this.longitude,
                    iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
                    width: 16,
                    height: 21,
                    callout: {
                        content: res.data.houseNumber,
                        color: '#ffffff',
                        fontSize: 12,
                        borderWidth: 2,
                        borderRadius: 12,
                        bgColor: '#FF6203',
                        padding: 2,
                        display: 'ALWAYS',
                        textAlign: 'center'
                    }
                }]
            })
        }


    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: auto;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.content-top {
    .tabs {
        margin-bottom: 12px;
        // 需修改 原来是20px
        padding-left: 10px;
        padding-right: 10px;
        height: 16px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .white {

        .tab-item {
            font-size: 28rpx;
            // font-weight: bolder;
            color: #666666;
        }

        .tabbar-item {
            flex: auto;
            z-index: 1;
            text-align: center;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 32rpx;
                line-height: 32rpx;
                color: #111111;
            }
        }
    }
}

.main-container {
    background: #ffffff;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

}
// 背景图部分
.sur_box_bg {
	position: relative;
	// top: 0px;
	width: 100%;
	height: 427rpx;
    // background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);

	img {
		width: 100%;
		height: 427rpx;
	}
    .sur_box{
        width: 100%;
        height: 427rpx;
        background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);
    }

    .pageTopTitleContent{
        position: absolute;
        top: 221rpx;
        right: 69rpx;
        .pageTopTitle{
            font-size: 48rpx;
            text-align: right;
            color: #4E78D1;
            line-height: 48rpx;
        }
        .pageTopSubtitle{
            margin-top: 22rpx;
            border-radius: 15px;
            background: #4e78d1;
            font-size: 20rpx;
            line-height: 20rpx;
            text-align: right;
            color: #FFFFFF;
            padding: 5rpx 14rpx;
        }
    }
}
// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}
.card_bg{
    margin-left: 48rpx;
    margin-right: 48rpx;
    margin-top: -256rpx;
    z-index: 10;
    .pageTitle {
        font-weight: 500;
        font-size: 56rpx;
        text-align: left;
        color: #333;
        display: flex;
        align-items: center;
        img{
            width: 24rpx;
            height: 16rpx;
            line-height: 16rpx;
            margin-left: 24rpx
        }
    }
}
.card{
    margin-top:48rpx ;
    margin-bottom: 144rpx;
    padding: 40rpx 48rpx;
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 4rpx 16rpx #0000000f;

    // 活动地址
    .activityAddress {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .itemRight {
            width: 48rpx;
            height: 48rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .itemLeft {
            .activityDate {
                font-size: 36rpx;
                text-align: left;
                color: #333333;
                font-weight: bold;
            }

            .days {
                margin-top: 16rpx;
                font-size: 24rpx;
                width: 100%;
                color: #666666;
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
            }
        }

    }

    // 地图
    .map {
        margin-top: 40rpx;
        border-radius: 12rpx;
        background: transparent;
        border: 1rpx solid #e6e6e6;
    }

    .serviceProductInfo{
        

        .infoItem{
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            width: 100%;
            img{
                width: 112rpx;
                height: 112rpx;
            }
            .infoItemContent{
                margin-left: 32rpx;
               
            }
            .infoItemContent .label{
                font-weight: 400;
                font-size: 36rpx;
                text-align: left;
                color: #333;
                line-height: 36rpx;
            }
            .infoItemContent .text{
                font-weight: 400;
                font-size: 28rpx;
                text-align: left;
                color: #666;
                line-height: 28rpx;
                margin-top: 16rpx;
            }
            .phoneBox{
                display: flex; 
                align-items: center; 
                justify-content: space-between;
                width: calc(100% - (112rpx + 32rpx));
            }
        }
    }
}

.reservationInfo {
    background: #ffffff;
    margin-top: 48rpx;
    padding: 48rpx 32rpx;
}

//商品标题
.goods_detail {
    width: 100%;
}

.text {
    color: #111111;
    font-size: 44rpx;
    text-align: left;
    line-height: 30px;
}

.ellipsis {
    -webkit-line-clamp: initial;
    max-height: none;
}

.icon {
    position: absolute;
    right: 0px;
    bottom: 0px;

    img {
        width: 11px;
        height: 6px;
    }
}

// 标题
.title{
    font-size: 38rpx;
    text-align: left;
    color: #111111;
    line-height: 38rpx;
}



.goodsAction {

    #goodact {
        position: relative;
    }
   

}

.goods_act_box {
    position: relative;
    background-color: #ffffff;
    height: 72px;
}

.bottom{
    padding-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(env(safe-area-inset-bottom)) !important;
}

.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}

::v-deep .van-goods-action--safe {
    // padding-bottom: none !important;
}
::v-deep .van-goods-action-button__inner {
    font-weight: normal !important;
}
::v-deep .van-goods-action-icon {
   min-width:70rpx !important;
}
.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}
.r12{
    margin-right: 12px;
}
.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}

.button{
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FF6203 !important;
    height: 86rpx;
    line-height: 86rpx;
    background: #fff;
    border: 2rpx solid #ff6202 !important;
    width: 45%;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    // padding-left: 120rpx;
    // padding-right: 120rpx;
    width: 45%;
}
</style>
